<template>
	<view class="flex flex-col pad24">

		<view class="yeartext mar-b24">2024年</view>

		<template v-if="recordtype==0">
			<view class="rechargecss " v-for="item in 3">
				<view class="tittext">3月充值（元）</view>
				<view class="ctttext">¥100.00</view>
			</view>
		</template>

		<template v-if="recordtype==1">
			<view class="consumecss" v-for="item in 5">
				<view class="consumeitem flex flex-col">
					<view class="flex flex-a ju-bt ">
						<view class="nametext">购买非凡蛋白光-美白嫩肤套餐</view>
						<view class="pricetext">-1980.00</view>
					</view>
					<view class="ctttext">支付方式：卡金</view>
					<view class="ctttext">消费记录：2024-11-18 12:30</view>
				</view>
				<u-line color="#E6E6E6"></u-line>
			</view>
		</template>

		<template v-if="recordtype==2">
			<view class="refundcss" v-for="item in 5">
				<view class="refunitem flex flex-a ju-bt">
					<view class="flex flex-col">
						<view class="nametext">来自长沙爱美丽美容退款</view>
						<view class="timetext">2024-10-20 08:00</view>
					</view>
					<view class="pricetext">+1980.00</view>
				</view>
				<u-line color="#E6E6E6"></u-line>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordtype: 0
			}
		},
		onLoad(e) {
			console.log(e)
			switch (e.type) {
				case '0': {
					this.recordtype = 0
					uni.setNavigationBarTitle({
						title: '充值记录'
					})
					break;
				}

				case '1': {
					this.recordtype = 1
					uni.setNavigationBarTitle({
						title: '消费明细'
					})
					break;
				}
				case '2': {
					this.recordtype = 2
					uni.setNavigationBarTitle({
						title: '退款明细'
					})
					break;
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.yeartext {
		width: 96rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.rechargecss {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 32rpx;

		.tittext {
			width: 186rpx;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 20rpx;
		}

		.pricetext {
			width: 192rpx;
			height: 64rpx;
			font-family: MiSans, MiSans;
			font-weight: 600;
			font-size: 48rpx;
			color: #111111;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

	}

	.consumecss {
		background-color: #FFFFFF;
		width: 702rpx;

		.consumeitem {
			padding: 20rpx;

			.nametext {
				// width: 224rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #111111;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.pricetext {
				// width: 112rpx;
				height: 40rpx;
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				text-align: right;
				font-style: normal;
				text-transform: none;
			}

			.ctttext {
				// width: 120rpx;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 10rpx;
			}
		}
	}

	.refundcss {
		background-color: #FFFFFF;
		width: 100vw;

		.refunitem {
			padding: 20rpx;

			.nametext {
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #111111;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 16rpx;
			}

			.timetext {
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.pricetext {
				height: 42rpx;
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: right;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>